import React, { useEffect } from 'react';
import { Form, Row, Col, Input } from 'antd';
import { connect } from 'umi';
import { GradeSelector } from '..';
import FormItem from './PostFormItem';
import styles from './postForm.less';
import { useGradeList, usePositionTypeList } from '../../hooks';

const PostBasicInfo = props => {
    const {
        doubleStyle,
        isDetail,
        singleStyle,
        detail,
        form,
        form: { getFieldDecorator },
        isAllLoaded,
        setIsAllLoaded
    } = props;
    const [, gradeList] = useGradeList();
    const [, positionTypeList] = usePositionTypeList();
    useEffect(() => {
        const secondPositionCode = form.getFieldValue('secondPositionCode');
        const rankCode = form.getFieldValue('rankCode');
        if (secondPositionCode && rankCode && gradeList.length) {
            const targetItem = gradeList.find(item => item.rankCode === rankCode);
            if (targetItem) {
                form.setFieldsValue({
                    positionValue: `VV.${secondPositionCode.substring(0, 3)}.${secondPositionCode.substring(3, 6)}.${
                        targetItem.rankValue
                    }`
                });
            }
        }
    }, [form.getFieldValue('secondPositionCode'), form.getFieldValue('rankCode'), gradeList.length]);

    // code为空不能下一步
    useEffect(() => {
        if (form.getFieldValue('positionValue')) {
            setIsAllLoaded({ ...isAllLoaded, grade: true });
        }
    }, [form.getFieldValue('positionValue')]);

    return (
        <>
            <div className={styles.formBlockTitle}>基本信息</div>
            <Row>
                <Col span={12}>
                    <FormItem
                        {...doubleStyle}
                        required
                        disabled={isDetail}
                        form={form}
                        initialFormInfo={detail}
                        label="职位类别"
                        positionTypeList={positionTypeList}
                        prop={['firstPositionCode', 'secondPositionCode']}
                    />
                </Col>
                <Col span={12}>
                    <Form.Item label="职位名称" {...doubleStyle}>
                        {getFieldDecorator('positionName', {
                            initialValue: detail.positionName,
                            rules: [
                                {
                                    required: true,
                                    message: '职位名称不能为空'
                                },
                                {
                                    min: 2,
                                    max: 50,
                                    message: '请输入2~50个字符'
                                }
                            ]
                        })(<Input disabled={isDetail} placeholder="请输入" />)}
                    </Form.Item>
                </Col>
                <Col span={12}>
                    <Form.Item label="职级" required {...doubleStyle}>
                        {getFieldDecorator('rankCode', {
                            initialValue: detail.rankCode || undefined,
                            rules: [
                                {
                                    required: true,
                                    message: '职级不能为空'
                                }
                            ]
                        })(<GradeSelector disabled={isDetail} />)}
                    </Form.Item>
                </Col>
                <Col span={12}>
                    <Form.Item label="职位代码" required {...doubleStyle}>
                        {getFieldDecorator('positionValue', {
                            initialValue: detail.positionValue || undefined,
                            rules: [
                                {
                                    required: true,
                                    message: '职位代码不能为空'
                                }
                            ]
                        })(<Input disabled />)}
                    </Form.Item>
                </Col>
            </Row>
            <Row>
                <Col>
                    <Form.Item label="职位要求" {...singleStyle}>
                        {getFieldDecorator('positionDescription', {
                            initialValue: detail.positionDescription,
                            rules: [
                                {
                                    required: true,
                                    message: '职位要求不能为空'
                                },
                                {
                                    max: 500,
                                    min: 2,
                                    message: '2-500个字符'
                                }
                            ]
                        })(<Input.TextArea disabled={isDetail} placeholder="请输入" rows={4} />)}
                    </Form.Item>
                </Col>
            </Row>
        </>
    );
};

export default connect(({ dictionary, user }) => ({
    dictionary,
    user
}))(PostBasicInfo);
